<template>
  <div>
    <el-button
      @click="handleSwiper"
      size="mini"
      type="primary"
      style="margin-left: 4px"
    >
      {{$t('轮播设置')}}
    </el-button>
    <l-dialog
      :title="$t('轮播设置')"
      :visible.sync="isVisible"
      :width="952"
      :height="750"
      @close="handleClose"
      @opened="handleOpened"
      @ok="handleOk"
    >
      <div
        class="l-rblock"
        style="padding-bottom: 48px; background-color: #f0f2f5"
        v-loading="tableLoading"
      >
        <div class="l-rblock" style="overflow: hidden auto">
          <div
            class="l-v-item l-sw-item"
            v-for="(item, index) in tableData"
            :key="item.f_Id"
          >
            <el-image
              v-if="item.f_Id"
              :src="`${apiUrl}system/annexesfile/${item.f_Id}?token=${token}`"
            >
            </el-image>
            <div style="position: absolute; top: 8px; left: 8px">
              <el-checkbox @change="handleCheck(item)" size="20" :value="item.ischeck"></el-checkbox>
            </div>
            <div class="content__main">
              <span class="content__name" style="font-size:15px">{{ item.f_Title }}</span>
              <div class="content__menulist">
                <div class="content__view">
                  <el-tooltip :content="$t('Preview')">
                    <i
                      class="el-icon-view"
                      @click="handleViews(item, index)"
                    ></i>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="l-table--pagination" style="border: 0">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            background
            :page-sizes="[12, 20, 30, 50]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="tablePageSize"
            :current-page.sync="tableCurrentPage"
            :total="tableTotal"
          >
          </el-pagination>
        </div>
      </div>
    </l-dialog>
    <!--Preview配置-->
    <l-fullscreen-dialog
    :title="$t('Preview配置')"
    :headerMidWidth="320"
    :visible.sync="formViewVisible"
    :isStep="true"
    :steps="[$t('基本配置'), $t('大屏Preview')]"
    :stepActive.sync="stepActive"
    :validateSteps="handleValidateSteps"
    @ok="handleSaveView"
    @closed="handleCloseViewForm"
    @opened="handleOpenedViewForm"
  >
    <preview-form ref="preForm" :stepActive="stepActive" :ids="checkArr" :type="type"> </preview-form>
  </l-fullscreen-dialog>
  </div>
</template>
<script>
const api = window.$api.vdata.visual;
import previewForm from "./previewForm";
export default {
  name: "swiper-btn",
  components: {
    previewForm,
  },
  props: {},
  data() {
    return {
      isVisible: false,
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tablePageSize: 12,
      tableCurrentPage: 1,
      checkArr: [],
      tableAllData: [],
      formViewVisible: false,
      stepActive: 0,
      type: 1, // 0表示直接设置某个大屏的Preview配置，1表示轮播大屏的Preview配置
    };
  },
  computed: {},
  created() {},
  methods: {
    handleSwiper() {
      this.isVisible = true;
    },
    handleClose() {
      this.isVisible = false;
      this.tableData = [];
      this.tableCurrentPage = 1;
    },
    handleOpened() {
      this.checkArr = [];
      this.loadTablePageData();
    },
    handleViews(item) {
      let routeUrl = this.$router.resolve({
        path: `/vdata/preview?id=${item.f_Id}`,
      });
      window.open(routeUrl.href, "_blank");
    },
    loadTablePageData() {
      this.tableLoading = true;
      api
        .allObj()
        .then((res) => {
          const data = this.$deepClone(res.data.data);
          this.tableAllData =
            data.filter((item) => {
              return item.f_Password == "" || item.f_Password == null;
            }) || [];
          this.tableData = this.tableAllData.slice(
            (this.tableCurrentPage - 1) * this.tablePageSize,
            this.tableCurrentPage * this.tablePageSize
          );
          this.tableTotal = this.tableAllData.length;

          this.tableLoading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.tableLoading = false;
        });
    },
    handleCurrentChange(val) {
      this.tableCurrentPage = val;
      this.tableData = this.tableAllData.slice(
        (val - 1) * this.tablePageSize,
        val * this.tablePageSize
      );
    },
    handleSizeChange(val) {
      this.tablePageSize = val;
      this.tableData = this.tableAllData.slice(
        (this.tableCurrentPage - 1) * val,
        this.tableCurrentPage * val
      );
    },
    handleCheck(item) {
      if (!this.checkArr.length) {
        this.checkArr.push(item.f_Id);
        item.ischeck = true
      } else {
        let isInfo = false;
        for (let i = 0; i < this.checkArr.length; i++) {
          if (this.checkArr[i] === item.f_Id) {
            this.checkArr.splice(i, 1);
            isInfo = true;
            item.ischeck = false
            break;
          }
        }
        if (!isInfo) {
          this.checkArr.push(item.f_Id)
          item.ischeck = true
          }
      }
    },
    handleOk() {
      if (this.checkArr.length < 1) {
        this.$message({
          type: "info",
          message: this.$t("please select要轮播的大屏!"),
        });
      } else {
        this.isVisible = false;
        this.formViewVisible = true;
      }
    },
    handleValidateSteps() {
      return this.$refs.preForm.validateSteps();
    },
    updateModules() {
      this.$store.dispatch("system/module/getList");
    },
    async handleSaveView() {
        let isSave = true
        await this.$refs.preForm.validateBaseInfo().then(res=>{
            isSave = res
        })
        if (!isSave) return
      const loading = this.$loading({
        lock: true,
        text: this.$t("正在保存配置，请稍后"),
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
        
      this.$nextTick(async () => {
        const postData = await this.$refs.preForm.getForm();
        
        let res = null; //setmodule
          res = await api.swiperModule(postData)
        if (res) {
          this.$message({
            type: "success",
            message: this.$t("设置成功!"),
          });
          this.formViewVisible = false;
            this.updateModules();
        }
        loading.close();
      });
    },
    handleCloseViewForm() {
      this.$refs.preForm.resetForm();
    },
    async handleOpenedViewForm(showLoading, hideLoading) {
      showLoading("Loading data...");
        hideLoading();
    },

  },
};
</script>
<style lang="scss">
.l-sw-item {
  width: 220px;
  height: 180px;
}
</style>